{% extends 'base-layer.html' %}
{% load staticfiles %}
{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/zTree/css/metroStyle/metroStyle.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'plugins/zTree/css/zTreeStyle/zTreeStyle.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'plugins/zTree/css/demo.css' %}" type="text/css">
{% endblock %}

{% block main %}
    <style type="text/css">
        .ztree li span.button.switch.level0 {
            visibility: hidden;
            width:1px;
        }
        .ztree li ul.level0 {
            padding: 0;
            background:none;
        }
    </style>

    <div class="box box-danger">
        <div class="box-body">
            <form class="form-horizontal" id="addTreeForm" action="" method="post">
                {% csrf_token %}
                <!-- 注释1：页面实例是由Role2MenuView视图返回的，同时传递了上下文role,这里使用role.id时用来提交POST请求时向后台传递的id-->
                <input type="hidden" name="id" value="{{ role.id }}">
                <input type="hidden" name="tree" id="tree" value="">
                <div class="box-body">
                    <div class="row">
                        <div class="col-xs-5">
                            <div class="row span7 text-center">
                                <label class="control-label"><h5>所有菜单</h5></label>
                            </div>
                            <div style="zTreeDemoBackground:left">
                                <ul id="left_tree" class="ztree"></ul>
                            </div>
                        </div>

                        <div class="col-xs-2">
                            <br><br><br><br><br>
                            <div class="text-center">
                                <button type="button" id="btnSave" class="btn btn-info margin-right">生成</button>
                            </div>
                            <div class="text-center texy-gray margin-top-5">{{ role.name }}权限</div>
                        </div>

                        <div class="col-xs-5">
                            <div class="row span7 text-center">
                                <label class="control-label"><h5>已选菜单</h5></label>
                            </div>
                            <div style="zTreeDemoBackground:right">
                                <ul id="right_tree" class="ztree"></ul>
                            </div>

                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script src="{% static 'plugins/zTree/js/jquery.ztree.core.min.js' %}"></script>
    <script src="{% static 'plugins/zTree/js/jquery.ztree.excheck.min.js' %}"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            var zTree;
            var demoIframe;
            var left_tree_setting = {
                view: {
                    dblClickExpand:false,
                    showLine:true,
                    selectedMulti:true
                },
                check:{
                    enable:true,
                },
                data:{
                    key:{
                        name:'name'
                    },
                    simpleData:{
                        enable:true,
                        idKey:'id',
                        pIdKey:'parent',
                        rootPId:''
                    },
                }
            };

            var right_tree_setting = {
                view: {
                    dblClickExpand:false,
                    showLine:true,
                    selectedMulti:true
                },
                check:{
                    enable:false,
                },
                data:{
                    key:{
                        name:'name'
                    },
                    simpleData:{
                        enable:true,
                        idKey:'id',
                        pIdKey:'parent',
                        rootPId:''
                    },
                }
            };

            //左侧菜单初始化数据
            $.ajax({
               type:"GET",
               url:"{% url 'system:rbac-role-role2menu_list' %}",
               cache:false,
               success:function (msg) {
                   layer.close();
                   var t=$('#left_tree');
                   t=$.fn.zTree.init(t,left_tree_setting,msg.data);
                   var treeObj=$.fn.zTree.getZTreeObj('left_tree');
                   treeObj.expandAll(true);
                   return ;
               }
            });

            $.ajax({
               type:"GET",
               url:"{% url 'system:rbac-role-role2menu_list' %}",
               data:{'id':{{ role.id }}},
               cache:false,
               success:function (msg) {
                   layer.close();
                   var t=$('#right_tree');
                   t=$.fn.zTree.init(t,right_tree_setting,msg.data);
                   var treeObj=$.fn.zTree.getZTreeObj('right_tree');
                   treeObj.expandAll(true);
                   return ;
               }
            });


            $("#btnSave").click(function () {
                var treeObj=$.fn.zTree.getZTreeObj("left_tree");
                var nodes=treeObj.getCheckedNodes(true);
                $("#tree").val(JSON.stringify(nodes));
                var data=$("#addTreeForm").serialize();
                $.ajax({
                    type:$("#addTreeForm").attr('method'),
                    url:"{% url 'system:rbac-role-role2menu' %}",
                    data:data,
                    cache:false,
                    beforeSend:function () {
                        this.layerIndex=layer.load(1,{
                            shade:[0.1,"#fff"]
                        });
                    },
                    success:function (msg) {
                        if (msg.result) {
                            layer.alert('操作成功',{icon:1},function (index) {
                                parent.layer.closeAll();
                            });
                        } else {
                            layer.alert('操作失败',{icon:2});
                        }
                        return ;
                    }
                });
            });

        });

    </script>

{% endblock %}